<template>
  <el-dialog title="问题详细" :visible.sync="show" append-to-body width="800px" @closed="closed">
    <div class="detail-content" v-loading="infoLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
      <el-empty v-if="!info.evalProblemId && !infoLoading" />
      <div v-else>
        <div class="subtitle">基本信息</div>
        <el-descriptions size="small" border :label-style="{ width: '80px' }" :content-style="{ maxWidth: '250px' }">
          <el-descriptions-item label="检查阶段" v-if="isDelivery">
            <dict-tag :options="dict.type.cq_eval_problem_type" :value="info.problemType" v-if="info.problemType" style="zoom: 0.9; margin-top: -2px" />
          </el-descriptions-item>
          <el-descriptions-item label="检查项" :span="isDelivery ? 1 : 2">
            <el-tag size="small" type="primary" v-if="info.chkitemCode" style="zoom: 0.9; margin-top: -2px">{{ chkCode2name[info.chkitemCode] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <dict-tag :options="evalRectifyResultList" :value="info.rectifyResult" style="zoom: 0.9; margin-top: -2px" />
          </el-descriptions-item>
          <el-descriptions-item label="验收标准" :span="3">{{ info.standardContent }}</el-descriptions-item>
          <el-descriptions-item label="录入人">{{ info.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="录入时间" :span="isDelivery ? 2 : 1">{{ info.createTime }}</el-descriptions-item>
          <el-descriptions-item label="问题房间" v-if="isDelivery">{{ info.positionName }}</el-descriptions-item>
          <el-descriptions-item label="问题部位" v-if="isDelivery">{{ info.spaceName }}</el-descriptions-item>
          <el-descriptions-item label="违反数">{{ info.violateNum }} 处</el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="3">{{ info.description || '暂无描述' }}</el-descriptions-item>
          <el-descriptions-item label="问题附件" :span="3">
            <MediaList :list="info.bizFiles" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-for="(item, index) in recordList" :key="index">
        <div class="subtitle">{{ item.operateName }}详情</div>
        <el-descriptions size="small" border :label-style="{ whiteSpace: 'nowrap' }" :content-style="{ maxWidth: '250px' }">
          <el-descriptions-item :label="`${item.operateName}人`" :label-style="{ width: '50px' }">{{ item.creatorName }}</el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}时间`" :span="item.operateType === 20 ? 1 : 2">{{ item.createTime }}</el-descriptions-item>
          <el-descriptions-item label="状态" v-if="item.operateType === 20">
            <dict-tag :options="evalRectifyResultList" :value="item.lastRectifyResult" style="margin-top: -2px" />
          </el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}描述`" :span="3">{{ item.reason || item.remark || '暂无描述' }}</el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}附件`" :span="3">
            <MediaList :list="item.sysFiles" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// 日常巡查详情
import { EVAL_CHKITEM_CODE as CHK_CODE, evalRectifyResultList } from '@/utils/baseData'
import { getFileURL } from '@/api/common'
import { listNextLevel, getScoreItemDetail } from '@/api/checkScore/cqEval'
import MediaList from '@/views/patrol/components/MediaList'
export default {
  components: { MediaList },
  dicts: ['cq_rectify_operate', 'cq_eval_problem_type'],
  data() {
    return {
      evalRectifyResultList,
      show: false,
      scoreItemId: '',
      chkitemType: '',
      firChkList: [], // 一级检查项
      firChkLoading: false,
      infoLoading: false,
      info: {},
      recordList: []
    }
  },
  computed: {
    isDelivery() {
      // 是否为交付
      return this.chkitemType === CHK_CODE.DELIVERY
    },
    chkCode2name() {
      return this.firChkList.reduce((o, i) => !void (o[i.chkitemCode] = i.chkitemName) && o, {})
    }
  },
  methods: {
    closed() {
      this.info = {}
      this.recordList = []
    },
    open({ chkitemType, scoreItemId, firChkList = [] }) {
      if (!scoreItemId) return this.msgError('参数错误：问题ID不能为空')
      this.show = true
      this.chkitemType = chkitemType
      this.scoreItemId = scoreItemId
      this.getInfo()

      // 无传入检查项时，组件内部自动获取
      this.firChkList = firChkList
      if (!firChkList.length) this.getFirChkList()
    },
    async getFirChkList() {
      this.firChkLoading = true
      const res = await listNextLevel({ chkitemCode: this.chkitemType }).catch(() => false)
      this.firChkLoading = false
      if (res === false) return (this.firChkList = [])
      this.firChkList = res.data || []
    },
    async getInfo() {
      const opt = { scoreItemId: this.scoreItemId }
      this.infoLoading = true
      const res = await getScoreItemDetail(opt).catch(() => false)
      this.infoLoading = false
      if (res === false) return

      const data = res.data || {}
      data.bizFiles = data.bizFiles || []
      data.bizFiles.map(r => (r.url = getFileURL(r.fileId)))
      this.info = data
      this.handleRecordList()
    },
    handleRecordList() {
      const data = this.info.rectifyRecords || []
      const operateMap = this.dict?.label.cq_rectify_operate || {}
      data.map(i => {
        i.operateName = operateMap[i.operateType] || '处理'
        i.sysFiles = i.sysFiles || []
        i.sysFiles.map(r => (r.url = getFileURL(r.id)))
      })
      this.recordList = data
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-content {
  min-height: 300px;
  max-height: calc(88vh - 100px);
  overflow-y: auto;
  margin-top: -30px;
  .subtitle {
    background-color: #f9fafc;
    padding: 5px 10px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
